import React, { useState } from 'react'
import { Provider } from 'react-redux'
import store from '../components/redux/store'
import Header_container from '../components/containers/Header_container'
import ClassShow from '../components/home/ClassShow'
import styles from '../styles/home/home.scss'
import Message from '../components/home/Message'
import TotalInfoShow from '../components/home/TotalInfoShow'

const siderData = [
    '查看教室信息',
    '消息',
    '信息显示'
]

export default function home() {
    const [siderIndex, setSiderIndex] = useState(0)

    const judgePage = () => {
        const contrast = {
            0: <ClassShow />,
            1: <Message />,
            2: <TotalInfoShow />
        }
        return contrast[siderIndex]
    }
    return (
        <div>
            <Provider store={store}>
                <Header_container />
            </Provider>
            <div className={styles.layout}>
                <div className={styles.sider}>
                    {
                        siderData.map((item, index) => {
                            return <div
                                className={index === siderIndex ?
                                    [`${styles.siderItem}`, `${styles.siderActive}`].join(' ') :
                                    styles.siderItem}
                                key={index}
                                onClick={() => { setSiderIndex(index) }}
                            >
                                {item}
                            </div>
                        })
                    }
                </div>
                {
                    judgePage()
                }
            </div>
        </div>
    )
}
